<template>
  <div class="hello">
    <h1>生命周期</h1>
    <h2 ref="msgData">{{msgData}}</h2>
  </div>
</template>

<script>
export default {
  name: "Demo2",
  props: {
    msg: String
  },
  data() {
    return {
      isShow : false,
      msgData : "123"
    }
  },

  // watch函数可以相应对应值的变化
  watch: {
    isShow() {
      if (this.isShow) {
        console.log("val：" + this.isShow + "我被执行了。")
      }
    }
  },
  //创建之前:beforeCreate
  beforeCreate() {
    console.log("beforeCreate");
    console.log("即将创建");
  },
  //创建完毕:created()
  created() {
    console.log("created");
    console.log("即将完毕");
  },
  //挂载前，#el挂载到我们指定的节点:beforeMount
  beforeMount() {
    console.log("beforeMount");
    console.log("即将挂载");
  },
  //挂载完毕：mounted()
  mounted() {
    console.log("mounted")
    console.log("挂载完毕");

    // var num = 4;
    setInterval(()=> {

      // this.msgData += (num +"")
      // num++
      this.isShow = ! this.isShow;
    },3000);
  },
  //修改vue实例的data时，vue会自动更新渲染视图，beforeUpdate
  beforeUpdate() {
    // 如果页面刷新时会走到这个生命周期里，对获取的内容个可以做一些处理
    console.log("=即将更新渲染=");
    console.log("msgData:" + this.msgData);
  },
  beforeDestroy() {
    console.log("销毁之前");
  },
  destroyed() {
    console.log("销毁成功");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
